<template>
  <div>
    <bread-crumb></bread-crumb>
    <h1>成绩分析</h1>
    <el-row>
      <el-col :span="8" :offset="6">
        <el-input placeholder="请输入学号" v-model.trim="stu_id"></el-input>
      </el-col>
      <el-col :span="2">
        <el-button @click="getChartsData">分析成绩</el-button>
      </el-col>
    </el-row>
    <div class="stu_name">学生的姓名:{{ stu_name }}</div>
    <div class="echartsAnalysis">
      <el-row :gutter="20">
        <el-col :span="8">
          <div id="main" style="width: 100%; height: 100%"></div>
        </el-col>
        <el-col :span="8">
          <div id="chineseChart" style="width: 100%; height: 100%"></div>
        </el-col>
        <el-col :span="8">
          <div id="mathChart" style="width: 100%; height: 100%"></div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <div id="englishChart" style="width: 100%; height: 100%"></div>
        </el-col>
        <el-col :span="8">
          <div id="lizongChart" style="width: 100%; height: 100%"></div>
        </el-col>
        <el-col :span="8">
          <div id="wenzongChart" style="width: 100%; height: 100%"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  req_entry_grade,
  req_mid_grade,
  req_end_grade,
} from "@/api/gradeInfo.js";
import { stacked, basisLine } from "@/utils/charts.js";
// basisLine
export default {
  data() {
    return {
      stu_id: "",
      stu_name: "",
    };
  },
  methods: {
    async getChartsData() {
      // 获取到三次考试的成绩
      let result_entry = await req_entry_grade(this.stu_id);
      let result_mid = await req_mid_grade(this.stu_id);
      let result_end = await req_end_grade(this.stu_id);
      let entry_grade = result_entry.data[0];
      let mid_grade = result_mid.data[0];
      let end_grade = result_end.data[0];
      console.log(result_entry.data, result_mid.data, result_end.data);
      let gradeClass = ["chinese", "english", "math", "lizong", "wenzong"];
      let entryData = [];
      let midDate = [];
      let endData = [];

      this.stu_name = entry_grade.stu_name;

      //   堆叠图

      // gradeItem 指 gradeClass = ["chinese", "english", "math", "lizong", "wenzong"];
      // classGradeData 指 服务器请求回来的数据 对象
      // chartsSeriesData 指echarts需要的数据类型[]
      function getGrade(gradeItem, classGradeData, chartsSeriesData) {
        for (let key in classGradeData) {
          if (key == gradeItem) {
            chartsSeriesData.push(classGradeData[key]);
          }
        }
      }
      for (let i = 0; i < gradeClass.length; i++) {
        // console.log(i);
        getGrade(gradeClass[i], entry_grade, entryData);
        getGrade(gradeClass[i], mid_grade, midDate);
        getGrade(gradeClass[i], end_grade, endData);
      }

      //  经过对echarts折现堆叠图的分析
      //   entryData [语文", "英语", "数学", "理综", "文综"] 而从服务器得到的数据[{}]
      // [{}]--->[]

      console.log(entryData, midDate, endData);

      stacked(this, "main", entryData, midDate, endData);

      //折线图
      //   语文
      /*   let entryScore = [];
      //   console.log(entry_grade);
      entryScore.push(entry_grade.chinese);
      entryScore.push(mid_grade.chinese);
      entryScore.push(end_grade.chinese);
      console.log(entryScore);
      //   that,titleChart,containerId,score
      basisLine(this, "语文", "chineseChart", entryScore); */
      let chineseObj = {
        that: this,
        subject: "语文",
        containerId: "chineseChart",
        gradeItem: "chinese",
        entry_grade,
        mid_grade,
        end_grade,
      };
      this.score(chineseObj);

      //   数学
      let mathObj = {
        that: this,
        subject: "数学",
        containerId: "mathChart",
        gradeItem: "math",
        entry_grade,
        mid_grade,
        end_grade,
      };
      this.score(mathObj);

      //   英语
      let englishObj = {
        that: this,
        subject: "英语",
        containerId: "englishChart",
        gradeItem: "english",
        entry_grade,
        mid_grade,
        end_grade,
      };
      this.score(englishObj);
      //   理综
      let lizongObj = {
        that: this,
        subject: "理综",
        containerId: "lizongChart",
        gradeItem: "lizong",
        entry_grade,
        mid_grade,
        end_grade,
      };
      this.score(lizongObj);

      //   文综
      let wenzongObj = {
        that: this,
        subject: "文综",
        containerId: "wenzongChart",
        gradeItem: "wenzong",
        entry_grade,
        mid_grade,
        end_grade,
      };
      this.score(wenzongObj);
    },
    score({
      that,
      subject,
      containerId,
      gradeItem,
      entry_grade,
      mid_grade,
      end_grade,
    }) {
      let subScore = [];
      subScore.push(entry_grade[gradeItem]);
      subScore.push(mid_grade[gradeItem]);
      subScore.push(end_grade[gradeItem]);
      basisLine(that, subject, containerId, subScore);
    },
  },
};
</script>

<style lang="scss" scoped>
div {
  div {
    height: 30px;
  }
  .stu_name {
    margin: 30px 0;
    font-size: 20px;
    font-weight: 700;
  }
  .echartsAnalysis {
    div {
      height: 400px;
    }
  }
}
</style>